<template>
    <div class="container">
        <header-nav/>
        <div class="add-header">
            <h3>添加文章</h3>
        </div>
        <div class="add-container">
            <el-form :label-position="labelPosition" :model="articleForm">
                <el-form-item>
                    <h6>文章标题</h6>
                    <el-input v-model="articleForm.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <h6>文章简述</h6>
                    <el-input v-model="articleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <h6>文章正文</h6>
                    <quill-editor ref="myTextEditor"
                                  v-model=articleForm.contents
                                  :config="editorOption"
                                  @change="onEditorChange($event)">
                    </quill-editor>
                </el-form-item>
                <el-form-item class="submit-btn">
                    <el-button type="success" v-loading.fullscreen.lock="fullscreenLoading" @click="edits(artId)">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import HeaderNav from '@/components/HeaderNavbar'
    import {add, edit, getDataById, getDataByList} from "@/api/article";


    export default {
        name: "Edit",
        components: {
            HeaderNav
        },
        data() {
            return {
                fullscreenLoading: false,
                editorOption: {
                    theme: 'snow'
                },
                txt: '',
                labelPosition: 'left',
                articleForm: {
                    title: this.$store.state.value.title,
                    desc: this.$store.state.value.desc,
                    contents: this.$store.state.value.content
                }
            }
        },
        methods: {

            onEditorChange({editor, html, text}) {
                console.log('editor change!', html, text);
                this.articleForm.contents = html;
            },
            //  点击修改按钮
            edits(artId) {
                let datas = {
                    'id': artId,
                    'form': this.articleForm
                }
                edit(datas).then(res => {

                    const loading = this.$loading({
                        lock: true,
                        text: '修改中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    setTimeout(() => {
                        loading.close();
                        this.$notify({
                            title: '成功',
                            message: '修改文章成功',
                            type: 'success'
                        });
                        this.$router.push('/home');
                    }, 700);

                }).catch(err => {
                    console.log(err);
                })
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quillEditor
            },
            artId() {
                return this.$store.state.value.id
            }
        },
        mounted() {
            console.log('this is my editor', this.editor)
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/css/variable.styl'
    .add-container >>> .el-form-item__content
        line-height: 20px;

    .add-container >>> .el-form-item__content .el-button--success
        background-color: $themeColor;
        border-color: $themeColor;

    .add-header
        padding: $commonPadding
        h3
            padding-left: 10px;
            border-left: 3px solid $themeColor;

    .add-container
        padding: $commonPadding
        .el-form-item h6
            margin: 0;
            color: #666;
            padding-bottom: 10px;
            font-weight: 400;
</style>